<template>
  <div class="page-promotion">
    <div class="con-play" @click="audioPlayOrPause">
      <div class="mask" v-show="playFlag">
        <img class="audio-on" src="../assets/img/yy.png" alt="" />
      </div>
      <div class="mask" v-show="!playFlag">
        <img class="audio-off" src="../assets/img/yy.png" alt="" />
      </div>
    </div>

    <audio
      id="audio"
      :src="music"
      autoplay="autoplay"
      loop="loop"
      preload="auto"
    ></audio>
  </div>
</template>

<script>
import { Icon } from "vant";
export default {
  components: {
    [Icon.name]: Icon,
  },
  props: {
    activityItem: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      playFlag: true,
      clickMusicBtn: false,
      is_status: 1,
      music: "",
    };
  },
  watch: {
    activityItem: {
      handler(val) {
        console.log(val.music);
        this.music = val.music;
        console.log(this.music, "this.muisc");
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    console.log("activityItem", this.activityItem11);
  },
  destroyed() {},
  mounted() {
    const audio = document.getElementById("audio");
    this.audioAutoPlay(audio);
    document.addEventListener("visibilitychange", (e) => {
      // 兼容ios微信手Q
      if (this.clickMusicBtn) {
        // 点击了关闭音乐按钮
        if (this.playFlag) {
          const audio = document.getElementById("audio");
          this.audioAutoPlay(audio);
          this.playFlag = true;
        } else {
          this.audioPause();
          this.playFlag = false;
        }

        text.innerHTML = e.hidden;
        if (e.hidden) {
          // 网页被挂起
          const audio = document.getElementById("audio");
          this.audioAutoPlay(audio);
          this.playFlag = true;
        } else {
          // 网页被呼起
          this.audioPause();
          this.playFlag = false;
        }
      } else {
        // 未点击关闭音乐按钮
        if (this.playFlag) {
          this.audioPause();
          this.playFlag = false;
        } else {
          const audio = document.getElementById("audio");
          this.audioAutoPlay(audio);
          this.playFlag = true;
        }

        text.innerHTML = e.hidden;
        if (e.hidden) {
          // 网页被挂起
          this.audioPause();
          this.playFlag = false;
        } else {
          // 网页被呼起
          const audio = document.getElementById("audio");
          this.audioAutoPlay(audio);
          this.playFlag = true;
        }
      }
    });
  },
  methods: {
    audioPlayOrPause() {
      this.clickMusicBtn = !this.clickMusicBtn;
      if (this.playFlag) {
        this.audioPause();
        this.playFlag = false;
      } else {
        const audio = document.getElementById("audio");
        this.audioAutoPlay(audio);
        this.playFlag = true;
      }
    },
    audioPause() {
      let audio = document.getElementById("audio");
      audio.pause();
      document.addEventListener(
        "WeixinJSBridgeReady",
        function () {
          audio.pause();
        },
        false
      );
    },
    audioAutoPlay(audio) {
      audio.play();
      document.addEventListener(
        "WeixinJSBridgeReady",
        function () {
          audio.play();
        },
        false
      );
      document.addEventListener(
        "YixinJSBridgeReady",
        function () {
          audio.play();
        },
        false
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.page-promotion {
  position: fixed;
  top: 53px;
  z-index: 222;
  // width: 25px;
  // height: 25px;
  left: 20px;
  .con-play {
    .mask {
      width: 50px;
      height: 50px;
      padding: 12px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.4);
      img {
        // width: 25px;
        // height: 25px;
      }
    }
    .audio-on {
      animation: xz 1.3s linear infinite;
    }

    @keyframes xz {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }
}
</style>